import Vue from 'vue'

// 完整引入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 按需引入element
// import { Button, Select, Loading } from 'element-ui'

// 如果需要注册的组件很多，可以写到单独的文件里，然后调用reg
// import reg from './components/elementRegister.js'

import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import doConfirm from './components/auditConfirm.js'

// 完整引入vxetable
// import 'xe-utils'
// import VXETable from 'vxe-table'
// import 'vxe-table/lib/style.css'

// 按需引入vxetable
import XEUtils from 'xe-utils'
import { VXETable, Header, Column, Table } from 'vxe-table'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'

// 项目全局样式
import '@/assets/css/global.less'

// 引入字体文件
import './assets/font/iconfont.css'

import SocketService from '@/utils/socket_service.js'
SocketService.Instance.connect()

// 按需引入vxetable，按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})

Vue.use(ElementUI) // 完整注册element
// Vue.use(VXETable) // 完整注册vxetable

// 按需注册element组件
// Vue.use(Button).use(Select).use(Loading.directive)

// 按需注册vxetable组件
Vue.use(Header).use(Column).use(Table)

Vue.config.productionTip = false

// 把echarts挂到this上面
Vue.prototype.$echarts = window.echarts
Vue.prototype.$auditConfirm = doConfirm

// 把loading挂到this上面
const Loading = ElementUI.Loading
Vue.prototype.$loading = Loading.service

// 创建axios实例
const service = axios.create({
  // baseURL: 'http://localhost:8102/api',
  baseURL: 'http://localhost:8888/api',
})

// 把axios挂到this上面
// axios.defaults.baseURL = 'http://localhost:8888/api'
Vue.prototype.$http = service

const LoadingInstance = {
  _target: null, // 保存Loading实例
  _count: 0, // 每当发起一个请求，打开 loading，同时 _count 加1。每当一个请求结束，_count 减1，并判断 _count 是否为 0，如果为 0，则关闭 loading。
}

const addLoading = () => {
  LoadingInstance._target = Loading.service({ background: 'rgba(0, 0, 0, 0.8)' })
  LoadingInstance._count++
}
const closeLoading = () => {
  LoadingInstance._count--
  if (LoadingInstance._count === 0) {
    LoadingInstance._target.close()
    LoadingInstance._target = null
  }
}
const resetLoading = () => {
  LoadingInstance._count = 0
  LoadingInstance._target.close()
  LoadingInstance._target = null
}

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    addLoading()
    return config
  },
  (err) => {
    resetLoading()
    return Promise.resolve(err)
  }
)
// 响应拦截器
service.interceptors.response.use(
  (data) => {
    closeLoading()
    return data
  },
  (err) => {
    resetLoading()
    return Promise.reject(err)
  }
)

Vue.prototype.$socket = SocketService.instance

// cdn引入vxe时，注册组件的写法
// Vue.use(VXETable.Table).use(VXETable.Column).use(VXETable.Header)
// 下面这样注册也可以
// Vue.component(VXETable.Table.name, VXETable.Table)
// Vue.component(VXETable.Column.name, VXETable.Column)
// Vue.component(VXETable.Header.name, VXETable.Header)

// cdn引入element时，注册组件的写法，两种都可以
// Vue.component(ELEMENT.Button.name, ELEMENT.Button)
// Vue.use(ELEMENT.Button)

// reg() // 调用导入的element注册函数

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')
